const vm = new Vue({
    el: '#app',
    delimiters: ['[[', ']]'],

    data: {
        mobile: '',
        image_code: '',
        sms_code: '',
        password: '',
        sms_code_tip: '获取短信验证码',

        image_code_url: '',

        error_mobile_message: '',
        error_image_code_message: '',
        error_sms_code_message: '',

        error_mobile: false,
        error_password: false,
        error_image_code: false,
        error_sms_code: false,

        send_flag: false,
    },

    mounted() {
        this.generate_image_code();
    },

    methods: {

        // 校验手机号
        check_mobile: function () {
            let re = /^1[3-9]\d{9}$/
            if (re.test(this.mobile)) {
                this.error_mobile = false;
            } else {
                this.error_mobile_message = '您输入的手机号格式不正确';
                this.error_mobile = true;
            }

            // 判断手机号是否重复注册
            if (this.error_mobile == false) {
                let url = '/mobiles/' + this.mobile + '/count/'
                axios.get(url, {
                    responseType: 'json'
                })
                    .then(response => {
                        if (response.data.count == 1) {
                            this.error_mobile = true;
                            this.error_mobile_message = '手机号已存在';
                        } else {
                            this.error_mobile = false
                        }
                    })
                    .catch(error => {
                        console.log(error.response)
                    })

            }
        },

        // 校验验证码
        check_image_code: function () {
            if (this.image_code.length != 4) {
                this.error_image_code = true;
                this.error_image_code_message = '请输入图形验证码';
            } else {
                this.error_image_code = false
            }

            // 判断验证码是否正确
            if (this.error_image_code == false) {
                let url = '/validate_captcha/' + this.uuid + '/' + this.image_code
                axios.get(url, {
                        responseType: 'json'
                    }
                )
                    .then(response => {
                        if (response.data.code == '0') {
                            this.error_image_code = false;
                        } else {
                            this.error_image_code = true; // 图形验证码错误
                            this.error_image_code_message = response.data.errmsg;
                        }
                    })
                    .catch(error => {
                        console.log(error.response)
                    })
            }

        },

        // 校验密码
        check_password: function () {
            let re = /^[a-zA-Z0-9_-]{8,32}$/;
            if (re.test(this.password)) {
                this.error_password = false;
            } else {
                this.error_password = true;
            }
        },


        // 判断短息格式是否正确
        check_sms_code: function () {

            if (this.sms_code.length != 6) {
                this.error_sms_code_message = '请填写短信验证码';
                this.error_sms_code = true
            } else {
                this.error_sms_code = false
            }
        },

        // 发送短信验证码事件处理
        send_sms_code: function () {
            // 避免恶意用户频繁的点击获取短信验证码的标签
            if (this.send_flag == true) {
                return;
            }
            this.send_flag = true

            // 校验参数
            this.check_mobile();// 验证手机号是否正确
            if (this.error_mobile) {
                this.send_flag = false;
                return;
            }

            // 请求短信验证码
            let url = '/sms_codes/' + this.mobile;
            axios.get(url, {
                responseType: 'json'
            })
                .then(response => {
                    if (response.data.code == '0') {
                        // 倒计时60秒
                        let num = 60;
                        let t = setInterval(() => {
                            if (num == 1) {  // 倒计时即将结束
                                clearInterval(t); // 停止回调函数的执行
                                this.sms_code_tip = '获取短信验证码'; // 还原sms_code_tip的提示文字
                                this.send_flag = false;
                            } else {
                                num -= 1;
                                this.sms_code_tip = '还剩' + num + '秒';
                            }

                        }, 1000)
                    } else {
                        this.sending_flag = false;
                    }
                })
                .catch(error => {
                    console.log(error.response);
                    this.send_flag = false;
                })
        },

        // 生成图形验证码
        generate_image_code: function () {
            // 生成UUID。generateUUID() : 封装在common.js文件中，需要提前引入
            this.uuid = generateUUID();

            // 拼接图形验证码请求地址
            this.image_code_url = "/image_captcha/" + this.uuid + "/";
        },

        on_submit: function (e) {
            this.check_password();
            this.check_mobile();
            this.check_image_code();

            if (this.error_name || this.error_password || this.error_mobile ||
                this.error_image_code || this.error_sms_code) {

                // 禁用表单的提交
                e.preventDefault();
            }
        },

        // 生成图形验证码
        generate_image_code: function () {
            // 生成UUID。generateUUID() : 封装在common.js文件中，需要提前引入
            this.uuid = generateUUID();

            // 拼接图形验证码请求地址
            this.image_code_url = "/image_captcha/" + this.uuid + "/";
        },
    }
});